<template>
	<div class="back-top" @click='handleSrcollTop' :style="[backTopStyle]">
		<image src="$surl('/tools/top.png')" />
	</div>
</template>

<script setup>
import { computed } from 'vue';
import { useSystemStore } from '@/store/system.js'

const systemStore = useSystemStore();

const backTopStyle = computed(() => {
	let num = '-80rpx'
	systemStore['scrollTop'] > 100 ? (num = '60rpx') : (num = '-80rpx')
	return { right: num }
})

function handleSrcollTop() {
	let time = Math.round(systemStore['scrollTop'] * 0.3);
	let duration = time > 300 ? 300 : time;
	uni.pageScrollTo({ duration, scrollTop: 0 })
}
</script>

<style lang="scss" scoped>
.back-top {
	z-index: 9;
	width: 80rpx;
	height: 80rpx;
	bottom: 200rpx;
	position: fixed;
	transition: all 0.5s;

	image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
}
</style>